<template>
    <nav class="navbar" role="navigation" aria-label="Main navigation">
        <div class="navbar-inner">
            <!-- logo -->
            <div class="logo">
                <RouterLink to="/" class="brand" aria-label="Home">
                    <span class="brand-name">北京大学肿瘤医院淋巴瘤科</span>
                    <small class="brand-sub">Data Explorer</small>
                </RouterLink>
            </div>

            <!-- 移动端折叠按钮 -->
            <button class="hamburger" @click="showMenu = !showMenu" :aria-expanded="showMenu" aria-label="Toggle menu">
                <span :class="['bar', showMenu ? 'open' : '']" />
            </button>

            <!-- 菜单（桌面横向，移动端可折叠）-->
            <div class="nav-right">
                <div :class="['nav-links', { open: showMenu }]">
                    <RouterLink
                        v-for="item in menuList"
                        :key="item.path"
                        class="router-item"
                        :to="item.path"
                        active-class="active"
                        exact-active-class="active"
                    >
                        {{ item.label }}
                    </RouterLink>
                </div>
                <AvatarMenu />
            </div>
        </div>
    </nav>
</template>

<script setup lang="ts" name="NavBar">
    import { ref } from 'vue';
    import { RouterLink } from 'vue-router';
    import AvatarMenu from "@/components/AvatarMenu.vue";

    // simple menu list
    const menuList = [
        { path: '/', label: 'Home' },
        { path: '/search', label: 'Search' },
        { path: '/maftools/init', label: 'Maftools' },
        { path: '/rnaseqtools/init', label: 'RNASeqtools' }
    ];

    const showMenu = ref(false);

    // click.outside directive fallback (lightweight)
    // If your project has a global v-click-outside or similar, remove this.
    // Otherwise register a temporary directive locally:
    import { onMounted, onBeforeUnmount } from 'vue';
    const clickOutsideHandler = (e: any) => {
        const el = document.querySelector('.nav-links');
        const btn = document.querySelector('.hamburger');
        if (!el || !btn) return;
        if (showMenu.value && !el.contains(e.target) && !btn.contains(e.target)) {
            showMenu.value = false;
        }
    };
    onMounted(() => window.addEventListener('click', clickOutsideHandler));
    onBeforeUnmount(() => window.removeEventListener('click', clickOutsideHandler));
</script>

<style scoped lang="scss">
    /* Palette */
    $bg: #111827; // very dark blue/gray
    $accent: #98d14d; // green accent
    $muted: #9ca3af; // gray-400
    $link-hover: #60a5fa;

    .navbar {
        background: linear-gradient(180deg, rgba(17, 24, 39, 1), rgba(20, 25, 33, 1));
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 2001;
        box-shadow: 0 6px 18px rgba(2, 6, 23, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    /* container */
    .navbar-inner {
        max-width: 1200px;
        margin: 0 7.5%;
        padding: 0.65rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    /* Logo area */
    .logo {
        flex: 0 0 auto; /* don't shrink */
        display: flex;
        align-items: center;
    }
    .brand {
        display: inline-flex;
        align-items: baseline;
        gap: 0.6rem;
        text-decoration: none;
        color: inherit;
    }
    .brand-name {
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: 0.4px;
        white-space: nowrap; /* prevents wrapping */
    }
    .brand-sub {
        font-size: 0.72rem;
        color: $muted;
        display: block;
        margin-left: 0.25rem;
        white-space: nowrap;
    }

    /* hamburger (mobile) */
    .hamburger {
        display: none;
        background: transparent;
        border: none;
        padding: 6px;
        cursor: pointer;
        align-items: center;
        justify-content: center;
    }
    .hamburger .bar {
        width: 22px;
        height: 2px;
        background: #fff;
        display: block;
        position: relative;
        transition: all 0.25s ease;
    }
    .hamburger .bar::before,
    .hamburger .bar::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: #fff;
        transition: all 0.25s ease;
    }
    .hamburger .bar::before {
        top: -7px;
    }
    .hamburger .bar::after {
        top: 7px;
    }
    .hamburger .bar.open {
        background: transparent;
    }
    .hamburger .bar.open::before {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger .bar.open::after {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* nav links */
    .nav-links {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .router-item {
        color: #e6eefc;
        text-decoration: none;
        padding: 8px 10px;
        border-radius: 6px;
        font-size: 0.95rem;
        transition: all 0.18s ease;
        position: relative;
        white-space: nowrap;
    }
    .router-item:hover {
        color: $link-hover;
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.02);
    }
    .router-item.active {
        color: $accent;
        font-weight: 700;
    }
    .router-item.active::after {
        content: '';
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: -8px;
        height: 3px;
        background: linear-gradient(90deg, rgba(152, 209, 77, 1), rgba(96, 165, 250, 1));
        border-radius: 2px;
    }

    /* Responsive: small screens */
    @media (max-width: 880px) {
        .nav-links {
            position: absolute;
            top: 100%;
            right: 0;
            width: 220px;
            background: linear-gradient(180deg, rgba(15, 20, 28, 0.98), rgba(20, 24, 31, 0.98));
            border-left: 1px solid rgba(255, 255, 255, 0.02);
            border-bottom-left-radius: 8px;
            padding: 0.5rem;
            box-shadow: 0 8px 20px rgba(2, 6, 23, 0.6);
            transform-origin: top right;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-10px) scale(0.98);
            transition: all 180ms ease;
            flex-direction: column;
            gap: 0;
        }
        .nav-links.open {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(6px) scale(1);
        }
        .router-item {
            display: block;
            width: 100%;
            padding: 10px;
            border-radius: 6px;
        }
        .hamburger {
            display: inline-flex;
        }
        .navbar-inner {
            padding: 0.6rem 0.9rem;
        }
    }

    .nav-right {
        display: flex;
    }

</style>
